<template>
	<view class="content" >
		<image class="img-bg" src="../../static/share/img-fenxiang-bg@2x.jpg" mode="scaleToFill"></image>
		<image class="img-log" src="../../static/share/img-fenxiang-logo@2x.png" mode="aspectFit"></image>
		<view class="shareView">
			<view class="top">
				<image :src="userImg" mode="scaleToFill"></image>
				<view class="right">
					<view class="userName">
						{{nickName}}
					</view>
					<view class="tip">
						正在参加漫游闵行寻宝之旅
					</view>
				</view>
			</view>
			<view class="mid">
				<view class="box">
					<view class="box-top">
						已收集
					</view>
					<view class="box-bottom">
						<view class="num">
							{{keyNum}}
						</view>
						<view class="num-text">
							把钥匙碎片
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="box">
					<view class="box-top">
						已开启
					</view>
					<view class="box-bottom">
						<view class="num">
							{{boxNum}}
						</view>
						<view class="num-text">
							个宝箱
						</view>
					</view>
				</view>
			</view>
			<view class="dash-line"></view>
			<view class="bottom">
				<image src="../../static/share/WechatIMG931.jpeg" mode="scaleToFill"></image>
				<view class="share-tip">
					扫码加入，一起开启寻宝之旅吧！
				</view>
			</view>
			<button class="cu-btn btn-share" @click="onSaveClick">
				<image src="../../static/me/btn-anniu-130-zhengchang@2x.png" mode="aspectFit"></image>
				<text>保存图片</text>
			</button>
		</view>
		<canvas canvas-id="shareCanvas" class="canvas-area" />
	</view>
</template>

<script>
let app = getApp();
import {} from "../../utils/util.js"
import {getAuthorization} from "../../tool/pubTool.js"
import {getUserInfo} from "../../tool/userTool.js"

export default {
	data() {
		return {
			userImg: app.globalData.wxUserInfo.avatarUrl,
			nickName: app.globalData.wxUserInfo.nickName,
			keyNum:0,
			boxNum:0,
			unit: 1
		};
	},
	async onLoad(option) {
		await this.$onLaunched;
		this.getUserInfo()
		this.getUnit()
	},
	onShow() {
		this.getUnit()
	},
	methods: {
		getUnit(){
			uni.getSystemInfo({
				success: res => {
					this.unit=res.windowWidth/375
				}
			});
		},
		  /**
		   * 立即分享
		   */
		  onShareClick: function() {
				var self = this;
			getAuthorization({
				type:"scope.writePhotosAlbum",
				tip:"相册",
				callBack:function (){
					self.onSaveClick();
				}
			})
		  },
		async getUserInfo(){
			let res = await getUserInfo();
			this.boxNum = res.box_num;
			this.keyNum = res.key_num;
		},
		promisify: api => {
            return (options, ...params) => {
                return new Promise((resolve, reject) => {
                    const extras = {
                        success: resolve,
                        fail: reject
                    }
                    api({ ...options, ...extras }, ...params)
                })
            }
		},

		onSaveClick() {
			let unitNum = this.unit
			console.log('开始画图')
			const wxGetImageInfo = this.promisify(uni.getImageInfo)
			Promise.all([
                wxGetImageInfo({
                    src: 'https://file-oss.putaocdn.com/minhangwenchuang/share/img-fenxiang-bg@3x.jpg'
                }),
                wxGetImageInfo({
                    src: app.globalData.wxUserInfo.avatarUrl // 头像
                })
            ]).then(res => {
				console.log(res)
				const ctx = wx.createCanvasContext('shareCanvas')
				// 名称
				ctx.drawImage(res[0].path, 0, 0, 375* unitNum, 812 * unitNum)

				ctx.save();
  				ctx.beginPath();
				ctx.arc( (25 + 35) * unitNum, (25 + 269) * unitNum, 25 * 25 + 269, 0, Math.PI * 2, false);
				ctx.clip();
				ctx.drawImage(res[1].path, 35 * unitNum, 269 * unitNum, 50 * unitNum, 50 * unitNum)
				ctx.restore();

				ctx.setTextAlign('left')
                ctx.setFillStyle('#4D4D4D')
                ctx.setFontSize(18 * unitNum)
				ctx.fillText(app.globalData.wxUserInfo.nickName, 101 * unitNum, 287 * unitNum)

				ctx.setTextAlign('left')
                ctx.setFillStyle('#F3444B')
                ctx.setFontSize(55* unitNum)
				ctx.fillText(this.keyNum, 35 * unitNum, 422 * unitNum)

				ctx.setTextAlign('left')
                ctx.setFillStyle('#F3444B')
                ctx.setFontSize(55 * unitNum)
				ctx.fillText(this.boxNum, 226 * unitNum, 422 * unitNum)
				ctx.stroke()
				ctx.draw(false,() => {
                    this.tempFileImage()
				})
			})
		},
		tempFileImage() {
            let that = this
            uni.canvasToTempFilePath({
                    canvasId: 'shareCanvas',
                    success: (res) => {
                            uni.hideLoading()
                            that.savePic(res.tempFilePath)
                    },
                    fail:function () {
                            //TODO
                    }
            })
		},
		//保存
        savePic (filePath) {
            console.log('filePath', filePath)
            uni.showLoading({
                    title: '正在保存'
            });
            uni.saveImageToPhotosAlbum({
                    filePath: filePath,
                    success: function () {
                            uni.showToast({
                                    title: '图片保存成功～'
                            });
                    },
                    fail: function (e) {
                            //TODO
                    },
                    complete: function (){
                            uni.hideLoading()
                    }
            });
        }
	}
};
</script>

<style lang="stylus">
.canvas-area{
	position: absolute;
	left: -100vw;
	// width: 750rpx;
	// height: 1624rpx;
	width: 100%;
	height: 100%;
	z-index: -1;
}
	page{
		background-color #F6F6F6
		height 100%
		width 100%
	}

	.content{
		position relative
		height 100%
		width 100%
		display flex
		flex-direction column
		align-items center
		.img-bg{
			position absolute
			height 100%
			width 100%
			z-index -1
		}
		.img-log{
			width 563rpx
			height 260rpx
			display block
			margin-top 80rpx
		}
		.shareView{
			position relative;
			margin-top 24rpx
			background: #FFFFFF;
			border-radius: 20px;
			width 710rpx
			height 667rpx
			box-shadow: 0 8rpx 14rpx 5rpx rgba(0,0,0,0.38);
			padding 60rpx  50rpx 50rpx 50rpx
			.top{
				display flex
				align-items center
				>image{
					width 100rpx
					height 100rpx
					display block
					border-radius: 50%
					margin-right 32rpx
				}
				>view{
					display flex
					flex-direction column
					.userName{
						font-family: PingFangSC-Semibold;
						font-size: 36rpx;
						color: #4D4D4D;
						letter-spacing: 0.18rpx;
						line-height 50rpx;
						height 50rpx

					}
					.tip{
						margin-top 6rpx
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #B3B3B3;
						letter-spacing: 0;
						line-height: 36rpx;
					}
				}
			}
			.mid{
				margin-top 70rpx
				display flex
				align-items center
				justify-content space-around
				.box{
					display flex
					flex-direction column
					width 49%
					&:nth-child(3){
						padding-left 50rpx
					}
					.box-top{
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #808080;
						letter-spacing: 0;
						line-height 37rpx
					}
					.box-bottom{
						position relative
						top -20rpx
						display flex
						flex-direction row
						align-items baseline
						.num{
							font-family: PingFangSC-Semibold;
							font-size: 110rpx;
							color: #F3444B;
							letter-spacing: 0
						}
						.num-text{
							margin-left 10rpx
							font-family: PingFangSC-Regular;
							font-size: 26rpx;
							color: #808080;
							letter-spacing: 0;

						}
					}
				}
				.line{
					background: #D8D8D8;
					height 80rpx
					width 1px
				}
			}
			.dash-line{
				position absolute;
				left 16rpx;
				bottom 221rpx
				border-top: 1px dashed #D9D9D9;
				height 1px;
				width 678rpx
			}
			.bottom{
				margin-top 80rpx
				display flex
				flex-direction row
				align-items center
				>image{
					width 120rpx;
					height 120rpx
					display block;
				}
				>view{
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #808080;
					letter-spacing: 0;
					margin-left 30rpx
				}
			}
		}
		.btn-share{
			width 350rpx
			height 130rpx
			position relative;
			left 50%;
			bottom 10rpx
			transform translateX(-50%)
			>image{
				position absolute;
				left 0;
				top 0;
				width 100%;
				height 100%;
				display block
			}
			>text{
				position relative
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #FFFFFF;
				letter-spacing: 5.544px;
				line-height 130rpx
			}
		}
	}

</style>
